<template>
	<view class="container">
		<view class="bg-white p-l30 p-r30">
			<uni-forms ref="form" :modelValue="formData" :border="true">
				<uni-forms-item label="新密码" name="new_upass">
					<view class="uni-flex uni-row formItem">
						<input class="flex-item w-70" type="password" v-model="formData.new_upass" placeholder="请输入新密码" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="confirm_upass">
					<view class="uni-flex uni-row formItem">
						<input class="flex-item w-70" type="password" v-model="formData.confirm_upass" placeholder="请输入确认密码" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="旧密码" name="old_upass">
					<view class="uni-flex uni-row formItem">
						<input class="flex-item w-70" type="password" v-model="formData.old_upass" placeholder="请输入旧密码" />
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="formBtn bg-blue round-40 text-white" @click="submitForm">提交</button>
	</view>
</template>

<script>
import md5 from '@/common/md5.js';
import { setpwd } from "@/api/base.js";
let that;
export default {
	data() {
		return {		
			formData: {
				new_upass: "",
				confirm_upass: "",
				old_upass: "",
			},
			rules: {
				// 对name字段进行必填验证
				new_upass: {
					rules: [
						{ required: true, errorMessage: '请输入新密码' },
						{ minLength: 6, maxLength: 18, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
					]
				},
				confirm_upass: {
					rules: [
						{ required: true, errorMessage: '请输入确认密码' },
						{ minLength: 6, maxLength: 18, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
					]
				},
				old_upass: {
					rules: [
						{ required: true, errorMessage: '请输入旧密码' },
						{ minLength: 6, maxLength: 18, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
					]
				},
			}
		}
	},
	onLoad(){
		that = this;
	},
	methods: {
		// 触发提交表单
		submitForm() {
			that.$refs.form.validate().then(res=>{
				let params  = {
					new_upass: md5.hex_md5(res.new_upass),
					confirm_upass: md5.hex_md5(res.confirm_upass),
					old_upass: md5.hex_md5(res.old_upass),
				}
				setpwd(params).then(res => {
					if(res.code == 0) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'none'
						})
						uni.navigateBack(-1);
					}
				})				
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		}
	}
}
</script>

<style>
.formBtn {
	bottom: 100rpx;
	position: absolute;
	width: 86%;
	margin-left: 7%;
}
.formItem , .formItem_img{
	min-height: 72rpx;
	line-height: 72rpx;
	text-align: right;
	float: right;
	width: 100%;
	justify-content: flex-end;
	align-items: flex-end
}
.formItem input {
	min-height: 72rpx;
	line-height: 72rpx;	
}
.icon_right {
	width: 20px;
}
/deep/ .uni-forms-item__label {
    width: 70px !important;
}
</style>